<!doctype html>
<!--[if lt IE 8]>    <html lang="en-us" class="no-js lt-ie8"> <![endif]-->
<!--[if gte IE 8]><!--> <html lang="en-us" class="no-js"> <!--<![endif]-->
<head>
	<meta charset="utf-8">
	<title>flexMenu!</title>
	<meta name="description" content="flexMenu is a jQuery plugin that lets you create responsive menu bars that automatically collapse into a "more" drop-down when they run out of space.
">

	<meta name="viewport" content="width=device-width">
	<link rel="stylesheet" href="demo.css">

	<script src="modernizr.custom.js"></script>
	<link href='https://fonts.googleapis.com/css?family=Quantico:700' rel='stylesheet' type='text/css'>
</head>
<body>

	<div class="header">
		<h1>flexMenu</h1>
		<p>flexMenu is a jQuery plugin that lets you create responsive menu bars. When there's only space to display some of the items in the menu, the rest of the items collapse into a "more" drop-down. When there's only space to display one or two items, all the items collapse into a "menu" drop-down. Try it out - just resize the page, or view it on a smartphone!</p>
	</div>

	<div role="main" class="main">

		<ul class="menu flex">
			<li><a href="#">One</a></li>
			<li><a href="#">Two</a></li>
			<li><a href="#">Three</a></li>
			<li><a href="#">Four</a></li>
			<li><a href="#">Five</a></li>
			<li><a href="#">Six</a></li>
			<li><a href="#">Seven</a></li>
			<li><a href="#">Eight</a></li>
			<li><a href="#">Nine</a></li>
			<li><a href="#">Ten</a></li>
			<li><a href="#">Eleven</a></li>
			<li><a href="#">Twelve</a></li>
			<li><a href="#">Thirteen</a></li>
		</ul>
		<h2>Ready to get started?</h2>
		<p>A quick overview is available below. You can <a href="https://github.com/352Media/flexMenu">view flexMenu on GitHub</a> to get more details and grab a copy of the plugin.</p>

		<h2>The Markup</h2>
<pre>
&lt;ul class="flex menu"&gt;
    &lt;li&gt;&lt;a href="page.html"&gt;Menu Item&lt;/a&gt;&lt;/li&gt;
    &lt;!-- more list items... --&gt;
&lt;/ul&gt;</pre>
		<h2>The JavaScript</h2>
<pre>$('ul.menu.flex').flexMenu();</pre>

		<h2>Multiple Menus</h2>
		<p>This example has two menus. They can be opened on click, and opening one will close the other.</p>
		<ul class="menu flex-multi">
			<li><a href="#">One</a></li>
			<li><a href="#">Two</a></li>
			<li><a href="#">Three</a></li>
			<li><a href="#">Four</a></li>
			<li><a href="#">Five</a></li>
			<li><a href="#">Six</a></li>
			<li><a href="#">Seven</a></li>
			<li><a href="#">Eight</a></li>
			<li><a href="#">Nine</a></li>
			<li><a href="#">Ten</a></li>
			<li><a href="#">Eleven</a></li>
			<li><a href="#">Twelve</a></li>
			<li><a href="#">Thirteen</a></li>
		</ul>
		<ul class="menu flex-multi">
			<li><a href="#">One</a></li>
			<li><a href="#">Two</a></li>
			<li><a href="#">Three</a></li>
			<li><a href="#">Four</a></li>
			<li><a href="#">Five</a></li>
			<li><a href="#">Six</a></li>
			<li><a href="#">Seven</a></li>
			<li><a href="#">Eight</a></li>
			<li><a href="#">Nine</a></li>
			<li><a href="#">Ten</a></li>
			<li><a href="#">Eleven</a></li>
			<li><a href="#">Twelve</a></li>
			<li><a href="#">Thirteen</a></li>
		</ul>
		<div class="clear"></div>
	</div>

	<div class="footer">
		<p>A <a href="http://www.352media.com/">352 Inc.</a> shindig. Coded with love in Atlanta by <a href="http://www.ryandebeasi.com/">Ryan DeBeasi</a>.
		</p>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

	<script src="flexmenu.min.js"></script>

	<script>
		$('ul.menu.flex').flexMenu();
		$('ul.menu.flex-multi').flexMenu({
			showOnHover: false
		})
	</script>

</body>
</html>
